<template>
  <div class="system-config">
    <!-- Header Section -->
    <el-card class="header-card">
      <div class="header-content">
        <div class="left">
          <h2 class="title">系统配置</h2>
          <p class="subtitle">管理系统全局配置和参数设置</p>
        </div>
        <el-button
          type="primary"
          :style="{ backgroundColor: '#4834d4' }"
          @click="handleSaveAll"
        >
          <el-icon><Check /></el-icon>保存所有更改
        </el-button>
      </div>
    </el-card>

    <div class="config-container">
      <!-- 基础配置 -->
      <el-card class="config-card">
        <template #header>
          <div class="card-header">
            <el-icon><Setting /></el-icon>
            <span>基础配置</span>
          </div>
        </template>

        <el-form ref="basicFormRef" :model="basicConfig" label-width="120px">
          <el-form-item label="系统名称">
            <el-input v-model="basicConfig.systemName" />
          </el-form-item>
          <el-form-item label="系统Logo">
            <el-upload
              class="logo-uploader"
              action="#"
              :show-file-list="false"
              :before-upload="beforeLogoUpload"
            >
              <img
                v-if="basicConfig.logo"
                :src="basicConfig.logo"
                class="logo"
              />
              <el-icon v-else class="logo-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item label="主题色">
            <el-color-picker v-model="basicConfig.themeColor" />
          </el-form-item>
        </el-form>
      </el-card>

      <!-- 消息通知配置 -->
      <el-card class="config-card">
        <template #header>
          <div class="card-header">
            <el-icon><Bell /></el-icon>
            <span>消息通知配置</span>
          </div>
        </template>

        <el-form
          ref="notificationFormRef"
          :model="notificationConfig"
          label-width="120px"
        >
          <el-form-item label="通知方式">
            <el-checkbox-group v-model="notificationConfig.methods">
              <el-checkbox label="sms">短信</el-checkbox>
              <el-checkbox label="app">App推送</el-checkbox>
              <el-checkbox label="email">邮件</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="通知时间范围">
            <el-time-picker
              v-model="notificationConfig.timeRange"
              is-range
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="HH:mm"
            />
          </el-form-item>
          <el-form-item label="紧急通知级别">
            <el-select v-model="notificationConfig.emergencyLevel">
              <el-option label="高" value="high" />
              <el-option label="中" value="medium" />
              <el-option label="低" value="low" />
            </el-select>
          </el-form-item>
        </el-form>
      </el-card>

      <!-- 系统参数配置 -->
      <el-card class="config-card">
        <template #header>
          <div class="card-header">
            <el-icon><Monitor /></el-icon>
            <span>系统参数配置</span>
          </div>
        </template>

        <el-form ref="paramFormRef" :model="systemParams" label-width="120px">
          <el-form-item label="数据保留天数">
            <el-input-number
              v-model="systemParams.dataRetentionDays"
              :min="1"
              :max="365"
            />
          </el-form-item>
          <el-form-item label="会话超时时间">
            <el-input-number
              v-model="systemParams.sessionTimeout"
              :min="1"
              :max="1440"
            />
            <span class="unit-label">分钟</span>
          </el-form-item>
          <el-form-item label="自动备份">
            <el-switch
              v-model="systemParams.autoBackup"
              active-text="开启"
              inactive-text="关闭"
            />
          </el-form-item>
          <el-form-item label="备份时间" v-if="systemParams.autoBackup">
            <el-time-picker
              v-model="systemParams.backupTime"
              format="HH:mm"
              placeholder="选择时间"
            />
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

// 基础配置
const basicConfig = ref({
  systemName: '智能消防机器人管理系统',
  logo: '',
  themeColor: '#4834d4'
})

// 消息通知配置
const notificationConfig = ref({
  methods: ['sms', 'app'],
  timeRange: [new Date(2024, 1, 1, 8, 0), new Date(2024, 1, 1, 22, 0)],
  emergencyLevel: 'high'
})

// 系统参数配置
const systemParams = ref({
  dataRetentionDays: 30,
  sessionTimeout: 30,
  autoBackup: true,
  backupTime: new Date(2024, 1, 1, 2, 0)
})

// Logo上传前的处理
const beforeLogoUpload = (file) => {
  const isImage = file.type.startsWith('image/')
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isImage) {
    ElMessage.error('上传文件只能是图片格式!')
    return false
  }
  if (!isLt2M) {
    ElMessage.error('上传图片大小不能超过 2MB!')
    return false
  }
  return true
}

// 保存所有配置
const handleSaveAll = () => {
  // 这里添加实际的保存逻辑
  ElMessage({
    type: 'success',
    message: '配置保存成功'
  })
}
</script>

<style lang="scss" scoped>
.system-config {
  padding: 20px;

  .header-card {
    margin-bottom: 20px;

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        .title {
          margin: 0;
          font-size: 24px;
          font-weight: 600;
        }

        .subtitle {
          margin: 8px 0 0;
          color: #666;
          font-size: 14px;
        }
      }
    }
  }

  .config-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;

    .config-card {
      .card-header {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 16px;
        font-weight: 500;
      }

      :deep(.el-card__header) {
        padding: 15px 20px;
        border-bottom: 1px solid #ebeef5;
      }
    }
  }
}

.logo-uploader {
  :deep(.el-upload) {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s;

    &:hover {
      border-color: #4834d4;
    }
  }

  .logouploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    text-align: center;
    line-height: 120px;
  }

  .logo {
    width: 120px;
    height: 120px;
    display: block;
  }
}

.unit-label {
  margin-left: 8px;
  color: #666;
}

// 自定义主题色
:deep(.el-button--primary) {
  --el-button-hover-bg-color: #3a2aa8;
  --el-button-hover-border-color: #3a2aa8;
}
</style>
